<template>
	<view class="result-container">
		<custom-nav title="霍兰德测试" :isShowLeft="true" :isBlack="true"></custom-nav>
		<view class="banner">
			<view class="left">
				<view class="title">霍兰德职业测试</view>
				<view class="text">解码兴趣对号理想职业</view>
			</view>
			<img class="img" src="/schoolCube/static/img/AI2.png" alt="">
		</view>
		<view class="title">AI测评结果</view>
		<view class="result">
			<view class="top">精准推荐适合的专业方向</view>
			<view class="main">
				<view>{{hollandResult}}</view>
				<view></view>
			</view>
		</view>
		<view class="title">AI志愿推荐</view>
		<view class="result">
			<view class="top">精准规划适合的学校以及班型</view>
			<view class="main" style="padding: 0;">
				<view class="menu">
					<view class="menu-item" v-for="(item,index) in types" :key="index"
						:class="curType === item.value ? 'active':''" @click="changeType(item.value)">
						{{item.label}}
					</view>
				</view>
				<view class="content">
					<view class="school-plans" v-if="curResult.majors && curResult.majors.length">
						<table>
							<tr>
								<th>学校名称</th>
								<th>专业名称</th>
								<th>升学班型</th>
								<th>招生计划</th>
								<th>24年录取分</th>
							</tr>
							<tr v-for="(planItem, planIndex) in curResult.majors" :key="planIndex">
								<td>{{ planItem.schoolName }}</td>
								<td>{{ planItem.name }}</td>
								<td>{{ getType(planItem.classType)}}</td>
								<td>{{ planItem.num }}</td>
								<td>{{ planItem.score2024 }}</td>
							</tr>
						</table>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button type="primary" :disabled="isLoading" :loading="isLoading" @click="exportExcel">下载志愿填报</button>
		</view>
	</view>
</template>

<script>
	import {
		getAllClassTypes
	} from '@/requests/index.js';
	import ExcelJS from 'exceljs';
	import {
		saveAs
	} from 'file-saver';
	export default {
		data() {
			return {
				types: [],
				curType: 1,
				results: [],
				hollandResult: '',
				isLoading: false,
			}
		},
		computed: {
			curResult() {
				const index = this.results.findIndex(item => item.classType === this.curType);
				if (index > -1) {
					return this.results[index];
				} else {
					return [];
				}
			}
		},
		mounted() {
			this.types = getAllClassTypes();
			const data = uni.getStorageSync('AI');
			this.hollandResult = data ? data.hollandResult : '';
			this.results = data ? data.results : [];
		},
		methods: {
			getType(id) {
				const index = this.types.findIndex(item => item.id === id);
				if (index > -1) {
					return this.types[index].label;
				} else {
					return ''
				}
			},
			changeType(value) {
				this.curType = value;
			},
			async exportExcel() {
				this.isLoading = true;
				try {
					const titleArr = ['专业名称', '学校名称', '升学班型', '招生计划', '24年录取分']
					const data = [];
					this.results.forEach(item => {
						item.majors.forEach(planItem => {
							const planArr = [
								planItem.schoolName, 
								planItem.name, 
								this.getType(planItem.classType),
								planItem.num,
								planItem.score2024
							]
							data.push(planArr);
						})
					})
					// 创建工作表
					// 1. 创建工作簿
					const workbook = new ExcelJS.Workbook();
					const worksheet = workbook.addWorksheet('AI填报');
					// 2. 定义样式对象
					const headerStyle = {
						font: {
							bold: true,
							color: {
								argb: 'FFFFFFFF'
							}, // 白色字体
						},
						fill: {
							type: 'pattern',
							pattern: 'solid',
							fgColor: {
								argb: '2979ff'
							} // 蓝色背景
						},
						border: {
							top: {
								style: 'thin',
								color: {
									argb: 'FF000000'
								}
							},
							bottom: {
								style: 'thin',
								color: {
									argb: 'FF000000'
								}
							}
						},
						alignment: {
							vertical: 'middle',
							horizontal: 'center'
						}
					};
					const dataStyle = {
						font: {
							color: {
								argb: 'FF333333'
							}
						},
						alignment: {
							horizontal: 'center',
							vertical: 'middle',
						},
						border: {
							left: {
								style: 'thin',
								color: {
									argb: 'FFDDDDDD'
								}
							},
							right: {
								style: 'thin',
								color: {
									argb: 'FFDDDDDD'
								}
							}
						}
					};
					// 3. 添加带样式的数据
					// 表头
					const headerRow = worksheet.addRow(titleArr);
					headerRow.eachCell((cell) => {
						cell.style = headerStyle;
					});

					// 数据行
					const dataRows = data;
					dataRows.forEach(rowData => {
						const row = worksheet.addRow(rowData);
						row.eachCell((cell) => {
							cell.style = dataStyle;
						});
					});
					// 4. 设置列宽
					worksheet.columns = [
						{
							width: 35
						},
						{
							width: 25
						},
						{
							width: 20
						},
						{
							width: 12
						},
						{
							width: 12
						}
					];
					// 5. 生成文件并保存
					const buffer = await workbook.xlsx.writeBuffer();
					const blob = new Blob([buffer], {
						type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
					});
					// H5 平台下载
					saveAs(blob, '填报志愿.xlsx');
					this.isLoading = false;
				} catch (e) {
					this.isLoading = false;
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		overflow: hidden;

		.title {
			font-family: PingFang SC;
			font-size: 50rpx;
			font-weight: normal;
			color: #2979FF;
		}

		.text {
			font-size: 30rpx;
			line-height: 30rpx;
			color: #7AACFF;
		}

		.img {
			height: 150rpx;
		}
	}

	.title {
		font-size: 36rpx;
		margin: 0 30rpx;
		color: #2979FF;
		line-height: 40px;
	}

	.result {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 30rpx;

		.top {
			border: 1px solid #2979FF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			width: 100%;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			background: rgba(164, 196, 255, 0);
			color: #2979FF;
			font-size: 28rpx;
			box-shadow: inset -10px -10px 40px 0px rgba(164, 196, 255, 0.4), inset 10px 10px 40px 0px rgba(164, 196, 255, 0.4);
		}

		.main {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			width: 100%;
			flex: 1;
			background: #8AB6FF;
			padding: 30rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			overflow: auto;
		}

		.menu::-webkit-scrollbar {
			display: none;
		}

		.menu {
			width: 100%;
			padding: 0;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;

			.menu-item {
				display: inline-block;
				padding: 0 20rpx;
				line-height: 80rpx;
				text-align: center;
				box-shadow: inset -10px -10px 40px 0px rgba(164, 196, 255, 0.4), inset 10px 10px 40px 0px rgba(164, 196, 255, 0.4);
			}

			.menu-item.active {
				box-shadow: none;
				background: #8AB6FF;
			}
		}

		.content {
			width: 100%;
			padding: 30rpx;
			min-height: 300rpx;
			.school-plans{
				width: 100%;
				white-space: nowrap;
				overflow-x: auto;
				min-height: 300rpx;
			}
		}

		table {
			border: 1px solid #126BFF;
			border-collapse: collapse;

			td,
			th {
				border: 1px solid #126BFF;
				text-align: center;
				padding: 10rpx;
				color: #3d3d3d;
				font-size: 28rpx;
				height: 60rpx;
			}

			tr:nth-child(2n) {
				background: rgba(223, 235, 255, 0.5);
			}
		}
	}

	.bottom {
		padding: 30rpx;
	}
</style>